<template>
  <view class="wantBuyGoodsList-com">
    <view class="goods-item">
      <view
        class="goods-item__top"
        @click="navSwitch('/pages/wantBuy/detail?id=' + dataValue.id)"
      >
        <view class="goods-item__top-goods-info">
          <image :src="dataValue.mainPicUrl" class="goods-images" />
          <view class="goods-info">
            <view class="goods-info__name">
              <view class="neme u-line-1">{{ dataValue.goodsName }}</view>
              <view
                class="state"
                :style="dataValue.purchaseStatus !== 1 ? 'opacity: 0.5' : ''"
                >{{ dataValue.isFlag === 1 ? $t('locales.quoted') : '' }}</view
              >
            </view>

            <view class="goods-info__parameter"
              >{{$t('locales.brandSimple')}}:{{ dataValue.brandName }}</view
            >
            <view class="goods-info__parameter"
              >{{$t('locales.skuFormat')}}:{{ dataValue.specificationsName }}</view
            >

            <view class="goods-info__label">
              <view
                class="goods-info__label-item"
                v-for="item in 3"
                :key="item"
                v-show="dataValue.labelList[item - 1]"
                >{{ dataValue.labelList[item - 1] }}</view
              >
            </view>
          </view>
        </view>

        <view class="goods-item__top-goods-down">
          <view :style="dataValue.purchaseStatus !== 1 ? 'color: #999' : ''">
            <u-icon name="clock"></u-icon>
            <text v-if="dataValue.purchaseStatus === 1">
              <template v-if="dataValue.isLongterm === 1"> {{$t('locales.isLongterm')}} </template>
              <template v-else>
                <Down
                  :show-seconds="false"
                  color="#e5905b"
                  separator-color="#e5905b"
                  separator-size="28"
                  font-size="28"
                  show-days
                  separator="zh"
                  :timestamp="getDown(dataValue.timeRemaining)"
                />
                {{$t('locales.postOff')}}
              </template>
            </text>
            <text v-if="dataValue.purchaseStatus === -1">{{$t('locales.isClose')}}</text>
            <text v-if="dataValue.purchaseStatus === 0">{{$t('locales.isClosed')}}</text>
          </view>
          <view style="font-size: 24rpx; color: #999">
            <text style="font-size: 32rpx; color: #ff0f10">{{
              dataValue.purchaseQty
            }}</text>
            {{ dataValue.unit }}
          </view>
        </view>
      </view>

      <view class="goods-item__bottom">
        <!-- 已报价 -->
        <template v-if="dataValue.isFlag === 1">
          <!-- 求购状态：正常 -->
          <template v-if="dataValue.purchaseStatus === 1">
            <view
              class="goods-item__bottom-btn"
              @click="
                navSwitch('/pages/wantBuy/detail?type=1&id=' + dataValue.id)
              "
              >{{$t('locales.viewQuote')}}（{{dataValue.quotationQty}}）</view
            >
          </template>

          <!-- 求购状态：已关闭 -->
          <template v-if="dataValue.purchaseStatus === -1">
            <view class="goods-item__bottom-btn" @click="
                navSwitch('/pages/wantBuy/detail?type=1&id=' + dataValue.id)
              "
              >{{$t('locales.viewQuote')}}（{{dataValue.quotationQty}}）</view
            >
            <view
              class="goods-item__bottom-btn"
              style="border-left: 1px solid #e3e6ed"
              @click="
                navSwitch('/pages/wantBuy/form?again=true&id=' + dataValue.id)
              "
              >{{$t('locales.publishAgain')}}</view
            >
          </template>

          <!-- 求购状态：已截止 -->
          <template v-if="dataValue.purchaseStatus === 0">
            <view class="goods-item__bottom-btn" @click="
                navSwitch('/pages/wantBuy/detail?type=1&id=' + dataValue.id)
              "
              >{{$t('locales.viewQuote')}}（{{dataValue.quotationQty}}）</view
            >
            <view
              class="goods-item__bottom-btn"
              style="border-left: 1px solid #e3e6ed"
              @click="
                navSwitch('/pages/wantBuy/form?again=true&id=' + dataValue.id)
              "
              >{{$t('locales.publishAgain')}}</view
            >
          </template>
        </template>

        <!-- 未报价 -->
        <template v-if="dataValue.isFlag === 0">
          <!-- 求购状态：正常 -->
          <template v-if="dataValue.purchaseStatus === 1">
            <view class="goods-item__bottom-btn" style="opacity: 0.5"
              >{{$t('locales.nullPurchase')}}</view
            >
          </template>

          <!-- 求购状态：已关闭 -->
          <template v-if="dataValue.purchaseStatus === -1">
            <view
              class="goods-item__bottom-btn"
              @click="
                navSwitch('/pages/wantBuy/form?again=true&id=' + dataValue.id)
              "
              >{{$t('locales.publishAgain')}}</view
            >
          </template>

          <!-- 求购状态：已截止 -->
          <template v-if="dataValue.purchaseStatus === 0">
            <view
              class="goods-item__bottom-btn"
              @click="
                navSwitch('/pages/wantBuy/form?again=true&id=' + dataValue.id)
              "
              >{{$t('locales.publishAgain')}}</view
            >
          </template>
        </template>
      </view>
    </view>
  </view>
</template>
<script>
import Down from './u-count-down/u-count-down.vue'
export default {
  components: {
    Down
  },
  props: {
    dataValue: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },

  methods: {
    getDown(date) {
      const startDate = Date.parse(new Date())
      const endDate = Date.parse(date)
      console.log(endDate - startDate)
      return (endDate - startDate) / 1000
    },

    navSwitch(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.wantBuyGoodsList-com {
  .goods-item {
    margin: 16rpx 24rpx 0 24rpx;
    background-color: #fff;
    border-radius: 16rpx;

    .goods-item__top {
      padding: 24rpx;
      padding-bottom: 0;
      border-bottom: 1px solid #e3e6ed;

      .goods-item__top-goods-info {
        display: flex;

        .goods-images {
          width: 164rpx;
          height: 164rpx;
          margin-right: 25rpx;
          background-color: #f1f1f1;
          border-radius: 8rpx;
        }

        .goods-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .goods-info__name {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .neme {
              width: 360rpx;
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #333333;
            }

            .state {
              font-size: 28rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ff0f10;
            }
          }

          .goods-info__parameter {
            line-height: 36rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #666666;
            line-height: 24rpx;
          }

          .goods-info__label {
            display: flex;
            flex-wrap: wrap;
            .goods-info__label-item {
              line-height: 36rpx;
              background: #f2f4f7;
              border-radius: 4rpx;
              padding: 0 10rpx;
              text-align: center;
              font-size: 22rpx;
              font-family: PingFang SC;
              font-weight: 500;
              color: #999999;
              margin-right: 10rpx;
            }
          }
        }
      }

      .goods-item__top-goods-down {
        display: flex;
        justify-content: space-between;
        line-height: 104rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #e5905b;
      }
    }

    .goods-item__bottom {
      line-height: 88rpx;
      display: flex;
      .goods-item__bottom-btn {
        flex: 1;
        text-align: center;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #0049ac;
      }
    }
  }
}
</style>
